import React from 'react';
import { Balloon } from '@teamix/ui';
import { YunxiaoIcon, ButtonIcon } from '@alife/devops-ui';
import intl from '../../../locale';
import PathEllipsis from 'components/pathEllipsis';
import './index.scss';

export default function renderFileNameJsx(props) {
  const { item, onChange, type = 'primary' } = props;

  const nameJsx = (
    <div className="file-name-filename">
      <ButtonIcon
        type={type}
        color="gray"
        onClick={onChange}
        name={`trilateral-${item.isHidden ? 'right' : 'down'}-fill`}
        className="file-name-filename-arrow"
      />
      {/*
        @todo maxWidth的调整，200或400
        isLastItemMoreImportant={false}
      */}
      <PathEllipsis path={item.new_path} style={{ maxWidth: 200, marginRight: 8 }} />
      {item.a_mode !== item.b_mode ? (
        <Balloon.Tooltip
          trigger={
            <span className="file-name-filename-line-diff">
              <span>·</span>
              <span>{item.a_mode}</span>
              <YunxiaoIcon type="arrow-right-line" size="small" style={{ marginRight: 6 }} />
              <span>{item.b_mode}</span>
            </span>
          }
          align="t"
        >
          {intl.get({
            id: 'code-assets.src.utils.locale.TheFileTypeAndPermissions',
            defaultMessage: '文件类型及权限发生变化',
          })}
        </Balloon.Tooltip>
      ) : null}
    </div>
  );

  return (
    <div>
      <div className="file-name">
        <div className="file-name-left">
          {nameJsx}
          {item.new_path === item.old_path ? null : (
            <div className="rename-from">
              {intl.get({
                id: 'code-assets.src.utils.locale.RenameFrom',
                defaultMessage: '重命名自',
              })}{' '}
              {item.old_path}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
